<template>
    <div>
        <div class="handle-box">
          <el-row>
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
               <el-form-item label="填报月份">
                <el-date-picker
                  v-model="formInline.month"
                  type="month"
                  placeholder="选择月">
                </el-date-picker>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
              </el-form-item>
            </el-form>
          </el-row>  
          <el-row type="flex" class="row-bg" justify="end">
           <el-button type="primary" icon="el-icon-plus" @click="handleEdit('', {}, false)">新增</el-button>
          </el-row>
        </div>
        <el-table
                :data="tableData"
                border
                class="table"
                ref="multipleTable"
                header-cell-class-name="table-header"
                @selection-change="handleSelectionChange"
            >
                <el-table-column prop="time" label="填报时间" min-width="95" fixed='left'>
                    <template slot-scope="scope">
                        <el-link @click="handleEdit('',scope.row, true)" type="primary">{{scope.row.time}}</el-link>
                    </template>
                </el-table-column>
                <!-- <el-table-column prop="code" label="项目编号" width="115" fixed='left'>
                    <template slot-scope="scope">
                        <el-link @click="handleEdit('',scope.row, true)" type="primary">{{scope.row.code}}</el-link>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="项目名称" fixed='left' width="180">
                </el-table-column>
                <el-table-column prop="time" label="受理日期" width="105"></el-table-column>
                <el-table-column prop="guanlidanwei" label="管理单位" width="150" align="center"></el-table-column>
                <el-table-column prop="hangye" label="所属行业" width="150" align="center"></el-table-column>
                <el-table-column prop="xingzhi" label="项目性质" width="150" align="center">
                    <template slot-scope="scope">
                        {{scope.row.xingzhi | Filter('projectSort')}}
                    </template>
                </el-table-column>
                <el-table-column prop="liuyuguanlijigou" label="流域管理机构" width="150" align="center"></el-table-column>
                <el-table-column prop="shejisheng" label="涉及省市" width="150" align="center"></el-table-column>
                <el-table-column prop="shejiqu" label="涉及区/县" width="150" align="center"></el-table-column>
                <el-table-column prop="fangzhizeren" label="防治责任范围" width="150" align="center">
                    <template slot-scope="scope">
                        <span :class="scope.row.fangzhizeren == 0? 'warning': 'success'">
                            {{scope.row.fangzhizeren | Filter('hasOrNan')}}
                        </span>
                    </template>
                </el-table-column> -->
                <el-table-column prop="fanganshangbao" label="方案上报状态" min-width="95" align="center">
                    <template slot-scope="scope">
                        <span :class="scope.row.fanganshangbao == 1? 'warning': 'success'">
                            {{scope.row.fanganshangbao | Filter('appearStatus')}}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column prop="jishushencha" label="技术审查状态" min-width="95" align="center">
                    <template slot-scope="scope">
                        <span :class="scope.row.jishushencha == 1? 'warning': 'success'">
                            {{scope.row.jishushencha | Filter('reviewStatus')}}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column prop="fanganpifu" label="方案批复状态" min-width="95" align="center">
                    <template slot-scope="scope">
                        <span :class="scope.row.fanganpifu == 1? 'warning': 'success'">
                             {{scope.row.fanganpifu | Filter('replyStatus')}}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column prop="jianshejindu" label="建设进度" min-width="150" align="center">
                    <template slot-scope="scope">
                        <el-progress :percentage="scope.row.jianshejindu"></el-progress>
                    </template>
                </el-table-column>
                <el-table-column prop="jianchacishu" label="监督检查/次数" min-width="100" align="center"></el-table-column>
                <el-table-column prop="jianli" label="监理" min-width="95" align="center">
                    <template slot-scope="scope">
                        <span :class="scope.row.jianli == 0? 'warning': 'success'">
                            {{scope.row.jianli | Filter('hasOrNan')}}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column prop="shuitubaochi" label="水土保持监测" min-width="95" align="center">
                    <template slot-scope="scope">
                        <span :class="scope.row.shuitubaochi == 0? 'warning': 'success'">
                            {{scope.row.shuitubaochi | Filter('hasOrNan')}}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="180" align="center" fixed='right'>
                    <template slot-scope="scope">
                        <!-- <el-button
                            type="text"
                            icon="el-icon-check"
                        >提交</el-button> -->
                        <el-button
                            type="text"
                            icon="el-icon-edit"
                            @click="handleEdit(scope.$index, scope.row, false)"
                        >编辑</el-button>
                        <el-button
                            type="text"
                            icon="el-icon-delete"
                            class="red"
                            @click="handleDelete(scope.$index, scope.row)"
                        >删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    background
                    layout="total, prev, pager, next"
                    :current-page="query.pageIndex"
                    :page-size="query.pageSize"
                    :total="pageTotal"
                    @current-change="handlePageChange"
                ></el-pagination>
            </div>
        <!-- 编辑弹出框 -->
        <el-dialog :title="form.disabled ? '详情' : '编辑'" :visible.sync="editVisible" width="700px" append-to-body>
            <formDom @close="editVisible = false" :form="form"></formDom>
        </el-dialog>
    </div>
</template>
<script>
    import formDom from './form' ;
    export default {
         components: {
          formDom
        },
        data() {
            return  {
                formInline: {},
                query: {
                    address: '',
                    name: '',
                    pageIndex: 1,
                    pageSize: 10
                 },
                tableData: [{
                    code: 'ST-213326330',
                    name: '瓦山区蓄水保土耕作项目',
                    year: 2021,
                    guanlidanwei: '平顶建设',
                    hangye: '水土保护建设行业',
                    time: '2021-03-18',
                    xingzhi: 1,
                    liuyuguanlijigou: '南昌县水利局',
                    shejisheng: '江西省南昌市',
                    shejiqu: '南昌县',
                    fangzhizeren: 1,
                    fanganshangbao: 2,
                    jishushencha: 2,
                    fanganpifu: 2,
                    jianshejindu: 40,
                    jianchacishu: 3,
                    jianli: 1,
                    shuitubaochi: 1,
                }],
                editVisible: false,
                pageTotal: 2,
                form: {}
            }
        },
        methods: {
             // 删除操作
            handleDelete(index, row) {
                // 二次确认删除
                this.$confirm('确定要删除吗？', '提示', {
                    type: 'warning'
                })
                    .then(() => {
                        this.$message.success('删除成功');
                        this.tableData.splice(index, 1);
                    })
                    .catch(() => {});
            },
             // 编辑操作
            handleEdit(index, row, disabled) {
                this.idx = index;
                this.form = row;
                this.form = {...row, disabled}
                this.editVisible = true;
            },
        }
    }
</script>
<style scoped>
    .handle-box {
        margin-bottom: 20px;
    }
    
    .handle-select {
        width: 120px;
    }
    
    .handle-input {
        width: 300px;
        display: inline-block;
    }
    .table {
        width: 100%;
        font-size: 14px;
    }
    .red {
        color: #ff0000;
    }
    .mr10 {
        margin-right: 10px;
    }
    .table-td-thumb {
        display: block;
        margin: auto;
        width: 40px;
        height: 40px;
    }
    </style>
    